<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet/less" type="text/css" href="css/xStyle.less"/>
    <script type="text/javascript" src="js/lib/less.js"></script>
    <style>
        h1 {
            margin: 2rem;
        }
    </style>
</head>

<body>
<div>

    <div>
        <div>
            <div id='div1' ></div>
        </div>
        <div>          
            <div id="json1">

            </div>
        </div>
    </div>

    <div>
        <div>
            <div id='div2'></div>
        </div>
        <div>          
            <div id="json2">

            </div>
        </div>
    </div>

</div>
</body>
<script type="module">
    import vwPanel from './js/src/vwPanel.js';
    
    let obj ={code:'1001',name:'苹果',img:'img/apple1.jpg,img/apple2.jpg,img/apple3.jpg',
      nameBadge:"info",state:"启用 cyan,好用 purple",idImage:"img/龙.png",
      progress:'75%',
      time:new Date(),
      buttons:[{style:"flat primary",icon:"iDelete",name:"",title:"删除"},
      {style:"flat error",icon:"iView",name:"",title:"查看"}],
      desc:'   苹果不但外形漂亮，味道香甜，作用也很多。儿童经常吃苹果，可以促进大脑发育，增强记忆力。\n这是因为苹果不仅富有大脑所需的营养成分，而且含有有益于儿童生长发育的纤维和能增强记忆的锌。'};
    
    let cfg ={
    	el:'div1',
    	group:true,
    	obj:obj,
    	data:[{label:'编号:',$image:"idImage", $data:'code',col:'col-md-4',group:'基本信息'},
    	{label:'名称:',$data:'name',$badge:"nameBadge",col:'col-md-4',group:'基本信息'},
    	{label:'状态:',$data:'state',col:'col-md-4',group:'基本信息',type:"tag"},
    	{label:'状态:',$data:'buttons',col:'col-md-6',group:'基本信息',type:"button"},
    	{label:'进度:',$data:'progress',col:'col-md-6',group:'基本信息',type:"progress",style:"bg-success progress-bar-striped"},
    	{label:'图片:',$data:'img',type:'image',col:'col-md-12',group:'附加信息'},
    	{label:'描叙:',$data:'desc',type:'xtextarea',col:'col-md-12',group:'附加信息'},
    	{label:'时间:',type:'data',col:'col-md-12',group:'附加信息',placeholder:"组件搜索",$data:'time',format:'yyyy-MM-dd hh:mm:ss'}]
    }
    
   let p = new vwPanel(cfg);
   p.refresh();
     
</script>

</html>